<template>
  <div id="conflict-dialog">
    <div class="title">
      <span class="span-left">{{label}}:</span>
      <span class="span-right">{{lawContrastResult.muster_name}}</span>
    </div>
    <div class="timestamp">
      <el-scrollbar>
        <div v-for="(v,i) in lawContrastResult.clash_data" :key="i">
          <div class="timestamp-title">
            <div class="left">
              <span class="span-left">{{lawContrastResult.clash_data.length > 1 ? `观点${i+1}` : '观点'}}:</span>
              <span class="span-right">{{v.muster_content}}</span>
            </div>
            <div class="right" @click="toggle(i)">
              <span>{{v.toggleText}}</span>
              <img
                src="../../../../../static/regulations-contrast/arrows.svg"
                alt
                :class="v.toggleText === '收起' ? 'img' : 'img2'"
              />
            </div>
          </div>
          <el-checkbox-group v-model="checkboxGroupChecked" @change="checkboxChange">
            <el-timeline class="timeline" v-if="v.toggleBool">
              <el-timeline-item
                :timestamp="v.clash_list.length > 1 ? txt + (index + 1) : txt"
                placement="top"
                v-for="(value,index) in v.clash_list"
                :key="index"
              >
                <div class="card">
                  <p class="laws-name">
                    <label class="span-left">法规:</label>
                    <span class="span-right">{{value.law}}</span>
                  </p>
                  <p class="view-point">
                    <!--                <p v-for="(information,subscript) in value.clash_content" :key="subscript" class="view-point">-->
                    <label class="span-left">{{v.clash_list.length > 1 ? `观点${index + 1}` : '观点'}}:</label>
                    <span class="span-right">{{value.clash_content}}</span>
                  </p>
                </div>
                <el-checkbox
                  :label="value.id"
                  style="margin: 12px 0"
                  v-if="visibility"
                >不冲突</el-checkbox>
              </el-timeline-item>
            </el-timeline>
            <div class="line" v-if="i + 1 !== lawContrastResult.clash_data.length"></div>
          </el-checkbox-group>
        </div>
      </el-scrollbar>
    </div>
    <div class="explain">*本结果仅供参考，不代表正式监管意见！</div>
    <div class="download">
      <el-button size="mini" @click="download()" class="btn">
        <i class="iconfont law-icondownload"></i>
        <span>下载</span>
      </el-button>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  components: {},
  filters: {},
  props: {
    lawContrastResult: {
      type: Object
    },
    label: {
      type: String,
      default: '法规'
    },
    compareId: {
      type: Number
    },
    visibility: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      toggleTxt: '收起',
      txt: '冲突点',
      checkboxGroupChecked: []
    }
  },
  computed: {
    ...mapGetters({
      token: 'token'
    })
  },
  watch: {
    lawContrastResult: {
      handler (val) {
        if (val.clash_data) {
          val.clash_data.forEach(item => {
            this.$set(item, 'toggleText', '收起')
            this.$set(item, 'toggleBool', 'true')
          })
          // 初始化checkbox group的值
          const _checkboxGroupChecked = []
          val.clash_data.forEach(outerItem => {
            outerItem.clash_list.forEach(innerItem => {
              if (innerItem.compare_review === 1) {
                _checkboxGroupChecked.push(innerItem.id)
              }
            })
          })
          this.checkboxGroupChecked = _checkboxGroupChecked
        }
      },
      immediate: true
    }
  },
  created () {},
  mounted () {},
  activated () {},
  beforeDestroy () {},
  methods: {
    toggle (index) {
      this.lawContrastResult.clash_data[index].toggleBool = !this
        .lawContrastResult.clash_data[index].toggleBool
      if (this.lawContrastResult.clash_data[index].toggleBool) {
        this.lawContrastResult.clash_data[index].toggleText = '收起'
      } else {
        this.lawContrastResult.clash_data[index].toggleText = '展开'
      }
    },
    download () {
      let downloadURL =
        this.$api.downloadContrastResultURL +
        `${this.compareId}?_token=${this.token}`
      window.open(downloadURL)
    },
    checkboxChange (val) {
      const checkboxChecked = []
      this.lawContrastResult.clash_data.forEach(outerItem => {
        outerItem.clash_list.forEach(innerItem => {
          checkboxChecked.push({ id: innerItem.id, compare_review: 2 })
        })
      })
      if (this.checkboxGroupChecked.length) {
        this.checkboxGroupChecked.forEach(item => {
          checkboxChecked.forEach(value => {
            if (item === value.id) {
              value.compare_review = 1
            }
          })
        })
      }
      console.log(checkboxChecked)
      this.$emit('setFeedbackChecked', checkboxChecked)
    }
  }
}
</script>

<style lang="scss" scoped>

#conflict-dialog {
  padding-left: 5px;
  height: 100%;
  .title {
    width: 621px;
    min-height: 46px;
    background: $primary-bg-color;
    border-radius: 6px;
    font-weight: 600;
    font-size: $fs-m;
    border: 1px solid $box-border-color;
    padding: 13px 16px;
    box-sizing: border-box;
    margin: 0 auto;
    color: $default-text-color;
    overflow: hidden;
    margin-bottom: 10px;
    .span-left {
      width: 52px;
      float: left;
    }
    .span-right {
      width: calc(100% - 52px);
      float: left;
      text-align: left;
    }
  }
  .timestamp {
    height: calc(93vh - 400px);
    min-height: 200px;
    .timeline {
      padding-left: 20px;
    }
    .timestamp-title {
      height: auto;
      margin: 27px 0 20px 0;
      font-size: $fs-m;
      overflow: hidden;
      .left {
        width: calc(100% - 50px);
        line-height: 17px;
        float: left;
        span:first-child {
          color: $default-text-color;
        }
        .span-left {
          width: 45px;
          float: left;
          text-align: right;
          margin-right: 10px;
          font-weight: 600;
        }
        .span-right {
          width: calc(100% - 58px);
          float: left;
          text-align: left;
          line-height: 1.5;
        }
      }
      .right {
        color: $primary-color;
        cursor: pointer;
        text-align: center;
        float: right;
        span {
          margin-right: 6px;
        }
        img {
          width: 10px;
          height: 5px;
          vertical-align: middle;
        }
        .img {
          transform: rotate(180deg);
          transition: all 0.5s;
        }
        .img2 {
          transform: rotate(0deg);
          transition: all 0.5s;
        }
      }
    }
    .card {
      width: 534px;
      padding: 9px 13px;
      box-sizing: border-box;
      background: $box-title-bg-color;
      border-radius: 2px;
      p {
        margin: 0;
        line-height: 22px;
      }
      .span-left {
        width: 50px;
        float: left;
        text-align: right;
        margin-right: 5px;
      }
      .span-right {
        width: calc(100% - 69px);
        float: left;
        text-align: left;
        margin-left: 9px;
        line-height: 1.5;
      }
      .laws-name {
        color: $default-text-color;
        font-weight: 600;
        margin-bottom: 10px;
        font-size: $fs-m;
      }
      .view-point {
        width: 100%;
        color: $sedondary-text-color;
        font-size: $fs-m;
        overflow: hidden;
        span:first-child {
          color: $default-text-color;
        }
      }
    }
  }
  .line {
    width: 621px;
    height: 1px;
    background: rgba(199, 201, 210, 1);
    border-radius: 6px;
    margin: 0px auto 20px;
  }
  .explain {
    margin-top: 24px;
    margin-left: 50px;
    color: $tertiary-text-color;
    font-size: $fs-m;
    text-align: left;
  }
  .download {
    width: 610px;
    margin: 32px auto 17px;
    .btn {
      width: 610px;
      height: 32px;
      font-size: $fs-m;
      span {
        vertical-align: middle;
      }
      i {
        margin-right: 3px;
      }
    }
  }
}
</style>

<style lang="scss">
#conflict-dialog {
  .el-scrollbar {
    .el-scrollbar__view {
      padding: 0 49px 0 50px;
    }
    height: 100%;
  }
  .timestamp {
    .el-timeline-item__timestamp {
      width: 58px;
      height: 22px;
      background: rgba(255, 244, 220, 1);
      border-radius: 2px;
      line-height: 22px;
      text-align: center;
      color: #e9aa26;
      padding: 0;
      font-size: $fs-m;
    }
    .el-timeline-item__content{
      text-align: left;
    }
    .el-checkbox__input.is-checked + .el-checkbox__label {
      color: #01bf7e !important;
    }
    .el-checkbox__input.is-checked .el-checkbox__inner {
      background-color: #01bf7e;
      border-color: #01bf7e;
    }
  }
}
</style>
